
//图表面板
.clear{
    clear: both;
}

.chart-theme{
    width: 25px;
    height: 25px;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    margin-right:5px;
}
.graph-wrapper{
    .dashed-bottom{
        border-bottom: 1px dashed  #d1d1d1;
    }
    p{
        margin: 0;
    }
    .full-top-menu{
        padding-left: 10px;
        padding-bottom: 10px;
    }
    .graph-right{
        width: 290px;
        padding: 16px 0;
        z-index: 101;
        top: 50px;
        right: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .graph-main{
        border:1px solid @border-color-base;
        .left{
            background: #f7f7f7;
            top: 50px;
            bottom: 0;
            overflow-y: auto;
            float: left;
            width: 300px;
            height: calc(~ '100vh - 120px');
            .datasoure{
                padding: 5px 10px;
                min-height: calc(~'100vh - 164px');
                .title{
                    color: #777777;
                    margin: 5px 0;
                }
                .tablefield{
                    background: #fff;
                    list-style: none;
                    padding: 0;
                    height: calc(~'100vh - 332px');
                    overflow-x: hidden;
                    overflow-y: auto;
                    li{
                        cursor: pointer;
                        padding-left: 10px;
                        height: 32px;
                        line-height: 32px;
                    }
                    li:hover{
                        background: #ebf7ff;
                    }
                }
            }
            .graph-style {
                height: calc(~'100vh - 164px');
                overflow-x: hidden;
                overflow-y: auto;
            }
        }
        .content{
            position: relative;
            overflow-x: auto;
            border-left:1px solid @border-color-base;
            padding:0 25px 25px 25px ;
            height: calc(~ '100vh - 120px');
            margin-left:300px;
            z-index: 999;
            background: #fff;
            .scorller-cnt{
                min-width: 950px;
                height: 100%;
            }
            .graph-column{
                .column{
                    font-size: 14px;
                    height: 42px;
                    line-height: 42px;
                    border-bottom: 1px solid #d8d8d8;
                    .title{
                        width: 80px;
                        .rounds{
                            width: 16px;
                            height: 42px;
                        }
                        .rounds::after{
                            content: ' ';
                            width: 16px;
                            height: 16px;
                            background: #6cc8d7;
                            float: left;
                            border-radius: 16px;
                            margin-top: 12px;
                            margin-right: 5px;
                        }
                    }
                    ul{
                        height: 30px;
                        line-height: 30px;
                        padding-top:6px;
                    }
                    li{
                        list-style: none;
                        float: left;
                        border-radius: 20px;
                        background:#f0f2f5;
                        color: #3a3a3a;
                        padding: 0 10px;
                        border-radius: 2px;
                        margin-right: 15px;
                        .close{
                            position: absolute;
                            right: 0;
                            top: 0;
                            .fa{
                                background: @background-color-base;
                                color:@btn-default-bg;
                                border-radius: 100px;
                                padding: px;
                                height: 14px;
                                width: 15px;
                                text-align: center;
                            }
                        }
                    }
                    .cloumntit{
                        padding-left: 5px;
                        padding-right: 5px;
                    }
                }
            }
            .graph-content{
                width: 100%;
                height: calc(~ '100% - 93px');
                font-size: 14px;;
                position: relative;
                border: 1px solid @border-color-base;
                .left-filter{
                    // width: 16%;
                    width: 225px;
                    float: left;
                    overflow-y: auto;
                    overflow-x: hidden;
                    min-height: 100%;
                    border-right: 1px solid @border-color-base;
                    .filter-layer{
                        padding: 16px 14px 12px;
                        overflow: hidden;
                        position: relative;
                        min-height: 300px;
                    }
                    .t-center{
                        text-align: center;
                    }
                }
                .graph-chart{
                    // width: 83%;
                    // width: 100%;
                    // height: calc(~ '100% - 86px');
                    // float: left;
                    // position: absolute;
                    // right: 0;
                    // width: 100%;
                    /* height: calc(100% - 86px); */
                    /* float: left; */
                    padding: 16px;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    left: 225px;
                }
            }
        }

    }

    .add-graph-right{
        height: 100%;
        .right-content{

            // margin-left: 16px;
            background-color: @background-color-base;
            border: 0;
            border-top: 1px solid @border-color-base;
            .el-collapse-item__content{
                padding-left: 20px;
            }
            .right-row{
                margin-bottom: 15px;
                // overflow: hidden;
                .r-tit{
                    width: 75px;
                    display: inline-block;
                    height: 32px;
                    line-height: 32px;
                }
                .r-cnt{
                    float: right;
                    width:  calc(~ '100% - 75px');
                }

            }
            .right-row::after{
                content: " ";
                clear: both;
                display: block;
            }
            .right-graph-type{
                li{
                    display: inline-block;
                    height: 60px;
                    cursor: pointer;
                    text-align: center;
                    border-radius: 2px;
                    padding: 2px 0;
                    position: relative;
                    width: 65px;
                    font-size: 12px;
                    i{
                        font-size: 25px;
                    }
                }
                .svg-full{
                    position: absolute;
                    opacity: 0;
                    z-index: 9;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                }
                .disabled{
                    color: #c4c8cf;
                    border: 2px solid #fff;
                    opacity: 0.3;
                }
                .active{
                    color: #212121;
                    opacity: 1;
                    border: 2px solid #fff;
                }
                .selected{
                    background: #D8E3FB;
                }
                .selectedEmbed{
                    border: 2px solid @link-color;
                }
            }
        }
    }
}

//图表面板  自定义下拉菜单组件
.group-menu{
    position: relative;
    .column-menu{
        position: absolute;
        background: #fff;
        color: @normal-color ;
        left: -10px;
        min-width: 120px;
        z-index: 888;
        box-shadow: 0 1px 6px rgba(0,0,0,.2);
        top: 32px;
        box-sizing: border-box;
        border-radius: 4px;
        right: -10px;
        transform-origin: center top 0px;
        
    will-change: top, left;
        .column-group-item{
            padding: 2px 10px;
            cursor: pointer;
        }
        .group{
            border-top: 1px solid @border-color-base;
            color: #3a3a3a;
        }
        .selected{
            color: @link-color;
        }
        .column-group-item:hover{
            background: @background-color-base;

        }
    }

}

//拖拽进度条
.view-slider{
    position:relative;margin:7px 0;width:90%;height:10px;background:@background-color-base;border-radius:5px;cursor:pointer;
    .process{position:absolute;left:0;top:0;width:112px;height:15px;border-radius:5px;background:@link-color}
    .thunk{position:absolute;left:100px;top:-7px;width:20px;height:20px;z-index:2;}
    .block{
        width:20px;height:20px;border-radius:50%;
        border:2px solid @link-color;
        background:@background-color-base;
        transition:.2s all}
    .tips{
            z-index: 1;
            position: absolute;
            right: -12px;
            bottom: -8px;
            min-width: 15px;
            text-align: center;
            border-radius: 5px;
            height: 24px;
            color: @normal-color ;
    }
    .block:hover{transform:scale(1.1);opacity:.6}
}
//拖拽进度条 end


.overview-btn {
    width: 100%;
    border-radius: 0;
}

.graph-panel {
    width: 100%;
    height: 100%;
}

.graph-detail-wrapper {
    text-align: center;
    .panel {
        width: 60vw;
        height: 80vh;
        margin: auto;
        padding: 25px;
        // background: @theme-nav-back;
    }
}
.filter-disabled{
    color: #c4c8cf;
    border: 2px solid #fff;
    opacity: 0.3;
}
